<template>
	<view class="wrapper">
		<div class="header posf cfff" :style="{padding:`calc(12rpx + ${safeTop}px) 40rpx 25rpx`}">
			<div class="flex-start mb10">
				<div @click="openPage('../chengShi/chengShi')" class="center">
					<div class="mr5">{{city.name}}</div>
					<u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon>
				</div>
				<div class="bfff input-box center ml30" @click="openPage('../souSuo/souSuo')">
					<u-icon name="search" color="#999" size="20"></u-icon>
					<div class="f20 c999 flex1">搜索影片</div>
				</div>
			</div>
			<u-tabs :current="index" lineColor="#fff" :inactiveStyle="{ color: 'rgba(255,255,255,.8)' }"
				:activeStyle="{ color: 'rgba(255,255,255,1)' }" :list="list1" @click="click"></u-tabs>
		</div>
		<div class="main" :style="{padding:`calc(190rpx + ${safeTop}px) 20rpx 20rpx`}" >
			<reYing :reYinglist="reYinglist" v-show="index==0"></reYing>
			<yingYuan @initData="initData" :city="city" :yingYuanlist="yingYuanlist" v-show="index==1"></yingYuan>
			<jiJiang :jiJianglist="jiJianglist" v-show="index==2"></jiJiang>
		</div>
	</view>
</template>

<script>
	import jiJiang from './components/jiJiang.vue'
	import reYing from './components/reYing.vue'
	import yingYuan from './components/yingYuan.vue'
	export default {
		data() {
			return {
				list1: [{
					name: '热映',
				}, {
					name: '影院',
				}, {
					name: '即将上映'
				}],
				index: 1,
				reYinglist: [],
				jiJianglist: [],
				yingYuanlist: [],
				keyword: '',
				city: {
					name: '北京',
					id: 110100
				},
				pageNum: 1,
				pageSize: 10,
				loading: false,
				location: {
					longitude: 0,
					latitude: 0
				},
				userInfo: '',
				phone: '',
				arealist: ['浦东新区', '闵行区'],
				selectedValue: '全部区域'
			};
		},
		components: {
			jiJiang,
			reYing,
			yingYuan
		},
		onShow() {
			this.index = uni.getStorageSync('index')
			this.location = uni.getStorageSync('location')
			this.city = uni.getStorageSync('city')
			// this.getNowCity()
			this.userInfo = uni.getStorageSync('uInfo')
			if (this.userInfo) {
				this.phone = this.userInfo.phone
				this.initData()
			} else {
				uni.navigateTo({
					url: '/pages/dengLu/dengLu'
				})
				return;
			}


		},
		onShareAppMessage: function() {
			return {
				title: '分享',
				path: '/shouye/shouye?id=123'
			}
		},
		onLoad() {
			this.getHotMovie()

		},
		onReachBottom() {
			if (this.loading || this.index != 1) {
				return
			}
			this.pageNum++
			this.debounce(this.getCinemas())
		},
		methods: {
			initData(cityCode, keyWords) {
				this.pageNum = 1
				this.yingYuanlist = []
				this.getCinemas(cityCode, keyWords)
			},
			getNowCity() {
				let that = this
				uni.getFuzzyLocation({
					success(r) {
						that.location = r;
						that.$http('/api/getCurrentCity', {
							longitude: r.longitude,
							latitude: r.latitude
						}).then(c => {
							that.city = {
								name: c.data.cityName,
								id: c.data.cityCode
							};
						})
					},
					fail(r) {
						console.log(r)
						that.location = uni.getStorageSync('location')
						that.city = uni.getStorageSync('city')
						that.sToast('定位失败，使用默认城市')
						uni.hideLoading()
					}
				})
			},
			// 查询影院接口
			getCinemas(cityCode, keyWords) {

				let that = this
				this.loading = true
				this.$http('/api/getCinemas', {
					cityCode: cityCode || this.city.id,
					longitude: this.location.longitude || 0,
					latitude: this.location.latitude || 0,
					phone: this.phone,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					keyWords: keyWords || ''
				}).then((r) => {
					this.yingYuanlist = this.yingYuanlist.concat(r.data)
					setTimeout(() => {
						that.loading = false
					}, 500)

				})
			},
			// 查询热映接口
			getHotMovie() {
				this.$http('/api/hot/movie').then((r) => {
					this.reYinglist = r.data.filter((a) => {
						return a.movieName.indexOf(this.keyword) != -1
					})
				})
				// 查询即将上映接口
				this.$http('/api/soon/movie').then((r) => {
					this.jiJianglist = r.data.filter((a) => {
						return a.movieName.indexOf(this.keyword) != -1
					})
				})
			},
			click(e) {
				uni.setStorageSync('index', e.index)
				this.index = e.index
			}
		}
	}
</script>

<style lang="scss">
	.main {
		// padding: 210rpx 20rpx 20rpx;
	}

	.header {
		width: 100%;
		padding: 25rpx 40rpx 0;
		background: linear-gradient(170deg, #FF5858, #F857A5);
		top: 0;
		left: 0;
		z-index: 5;
		// height: 170rpx;
		.input-box {
			width: 310rpx;
			height: 50rpx;
			border-radius: 25rpx;
			padding: 0 20rpx;
		}
	}
</style>